<template>
  <view class="Purchase">
    <uv-navbar
      title="购买门票"
      @leftClick="leftClick"
      bg-color="linear-gradient(to right, #D2F1DE 0%, #E3F6E8 50% ,#D2F1DE 100%)"
      :fixed="true"
    ></uv-navbar>
    <view class="xuanz" style="margin-top: 190rpx">
      <view class="xuan-o" @click="$refs.calendars.open()">
        <text class="xuan-o-text">选择日期</text>

        <view class="xuan-o-left">
          <text>{{ value === "" ? "请选择" : value }}</text>
          <uv-icon name="arrow-right" size="30rpx" color="#909399"></uv-icon>
        </view>
      </view>
      <view class="xuan-s" @click="this.$refs.calendar.open()">
        <text class="xuan-s-text">预约时间段</text>

        <view class="xuan-o-left">
          <text>{{ values === "" ? "请选择" : values }}</text>
          <uv-icon name="arrow-right" size="30rpx" color="#909399"></uv-icon>
        </view>
      </view>
      <view class="xuan-s" @click="this.$refs.picker.open()">
        <text class="xuan-s-text">预约人数</text>

        <view class="xuan-o-left">
          <text>{{ values === "" ? "请选择" : num }}</text>
          <uv-icon name="arrow-right" size="30rpx" color="#909399"></uv-icon>
        </view>
      </view>
    </view>
    <view class="xinxi" v-for="item in people" :key="item">
      <view class="xinxi-one">
        <view class="xinxi-anme">游客姓名</view>
        <view>
          <input
            type="text"
            v-model="item.name"
            style="width: auto"
            placeholder="请填写"
          />
        </view>
      </view>
      <view class="xinxi-two">
        <view class="xinxi-hao">身份证号码</view>
        <view>
          <input
            type="text"
            v-model="item.idcard"
            style="width: auto"
            placeholder="请填写"
          />
        </view>
      </view>
    </view>
    <view class="num">
      <uv-icon name="plus-circle" size="30rpx" color="#057748"></uv-icon>
      <view class="num-name" @click="jia">添加更多用户</view>
    </view>
    <view class="lianxi">
      <view class="lianxi-one">
        <view class="lianxi-anme">联系电话</view>
        <view style="margin-right: 20rpx">
          <input
            type="number"
            style="width: auto"
            v-model="mobile"
            placeholder="输入联系电话"
          />
        </view>
      </view>
    </view>

    <!-- 按钮 -->
    <view style="height: 200rpx"></view>
    <view class="caterDetail-btns" @click="confirmOrder">
      <button
        class="caterDetail-btn"
        style="background: linear-gradient(to right, #00a579, #057849)"
      >
        确认购买
      </button>
    </view>

    <!-- 预约日期 -->
    <uv-calendar
      ref="calendars"
      :closeOnClickOverlay="true"
      @confirm="confirms"
    />

    <!-- 时间段 -->
    <uv-calendar
      ref="calendar"
      mode="range"
      :closeOnClickOverlay="true"
      @confirm="confirm"
    ></uv-calendar>
    <!-- 预约人数 -->
    <uv-picker ref="picker" :columns="columns" @confirm="confirmss"></uv-picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      values: "",
      value1: "",
      value2: "",
      nums: 1,
      num: "",
      columns: [[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]],
      value3: "",

      people: [
        {
          name: "",
          idcard: "",
        },
      ],
      mobile: "",
      sku_id: 0,
      goods_id: 0,
    };
  },
  onLoad(options) {
    this.goods_id = options.goods_id;
    this.sku_id = options.sku_id;
  },
  methods: {
    leftClick() {
      uni.navigateBack();
    },
    confirm(e) {
      console.log(e, "12312312");
      // 预约时间段 取e数组的第一个和最后一个
      this.values = e[0] + "至" + e[e.length - 1];
    },
    confirmss(e) {
      console.log(e);
      this.num = e.value[0];
    },
    confirms(e) {
      console.log(e);
      this.value = e[0];
    },
    jia() {
      if (this.nums <= this.num - 1) {
        this.people.push({
          name: "",
          idcard: "",
        });
        this.nums++;
      } else {
        uni.showToast({
          title: "请选择相应人数",
          icon: "none",
        });
      }
    },
    confirmOrder() {
      let obj = {
        day: this.value,
        num: this.num,
        people: this.people,
        time_range: this.values,
        sku_id: this.sku_id,
        mobile: this.mobile,
        type:'gmmp'
      };
      uni.navigateTo({
        url: `/liu/pages/confirmOrder?data=${JSON.stringify(
          obj
        )}&type=gmmp&goods_id=${this.goods_id}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.Purchase {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(to bottom, #d3f1de 0%, #f4f6f5 30%, #f6f6f6 100%);
  position: relative;

  .xuanz {
    width: 94vw;
    margin: 20rpx 3vw;
    border-radius: 20rpx;
    height: 360rpx;
    background-color: #fff;

    .xuan-o {
      height: 120rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .xuan-o-text {
        font-family: Source Han Sans CN;
        font-weight: 550;
        font-size: 30rpx;
        color: #121314;
        margin-left: 20rpx;
      }

      .xuan-o-input {
        width: 40%;
        margin-right: 20rpx;
      }

      .xuan-o-left {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-right: 20rpx;
      }
    }

    .xuan-s {
      height: 120rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .xuan-s-text {
        font-family: Source Han Sans CN;
        font-weight: 550;
        font-size: 30rpx;
        color: #121314;
        margin-left: 20rpx;
      }

      .xuan-s-input {
        width: 40%;
        margin-right: 20rpx;
      }

      .xuan-o-left {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-right: 20rpx;
      }
    }

    .uv-calendar {
      height: 240rpx;
    }
  }

  .xinxi {
    width: 94vw;
    margin: 20rpx 3vw;
    border-radius: 20rpx;
    height: 240rpx;
    background-color: #fff;

    .xinxi-one {
      height: 120rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .xinxi-anme {
        font-family: Source Han Sans CN;
        font-weight: 550;
        font-size: 30rpx;
        color: #121314;
        margin-left: 20rpx;
      }
    }

    .xinxi-two {
      height: 120rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .xinxi-hao {
        font-family: Source Han Sans CN;
        font-weight: 550;
        font-size: 30rpx;
        color: #121314;
        margin-left: 20rpx;
      }
    }
  }

  .num {
    width: 94vw;
    margin: 20rpx 3vw;
    height: 80rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    .num-name {
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 28rpx;
      color: #057748;
    }
  }

  .lianxi {
    width: 94vw;
    margin: 20rpx 3vw;
    border-radius: 20rpx;
    height: 120rpx;
    background-color: #fff;

    .lianxi-one {
      height: 120rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .lianxi-anme {
        font-family: Source Han Sans CN;
        font-weight: 550;
        font-size: 30rpx;
        color: #121314;
        margin-left: 20rpx;
      }
    }
  }

  .caterDetail-btns {
    width: 94vw;
    margin: 20rpx 3vw;
    padding: 0 3vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 30rpx;

    .caterDetail-btn {
      width: 100%;
      height: 80rpx;
      border-radius: 40rpx;
    }
  }
}
</style>
